import React, { useEffect, useState } from 'react'
import { NavBar } from 'antd-mobile'
import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
import '../css/wallet.scss'
import '../css/icon.scss'
import { getUserinfo } from '../../../request/instance'

// 钱包
export default function Wallet() {
  const navigate = useNavigate()
  const { state } = useLocation()
  const [userInfo, setUserInfo] = useState()
  const { id } = useParams()
  console.log(id);
  


  let getUser = async () => {
    const { data: { data } } = await getUserinfo(id)
    setUserInfo(data)
    console.log(data);
    
  }

  useEffect(() => {
    getUser()
  }, [])

  const back = () => {
    navigate('/show/mine')
  }
  return (
    <div className='wallet'>
      <NavBar onBack={back}>我的余额</NavBar>
      <div className="balance">
        <span className='iconfont icon-yue01'></span>
        <div>
          <span>余额</span>
          <span>￥{userInfo ? userInfo.wallet.remaining : ''}</span>
        </div>
      </div>
      <div className="letter">
        <span>日期</span>
        <span>金额</span>
        <span>方式</span>
      </div>
      <div className="flowWater">
        {
          userInfo ? userInfo.wallet.wallethandler.length >= 1 ?
            userInfo.wallet.wallethandler.map((item,index) => {
              return <div className='flowWaterInfo' key={index}>
                <span>{item.time.slice(0,10)}</span>
                <span>{item.price}</span>
                <span>{item.type}</span>
              </div>
            }) : <span>暂无流水</span> : <span>暂无流水</span>
        }
      </div>
      <div className="bottom">
        <span onClick={() => { navigate('/topup', { state: userInfo ? userInfo : '' }) }}>充值</span>
        <span>提现</span>
      </div>
    </div>
  )
}
